<#assign base=request.contextPath />

<div class="bjui-pageHeader" style="background-color:#fff; border-bottom:none;">
    <div class="bs-callout bs-callout-warning">
        <h4>Datagrid - 树型表格 示例说明</h4>
        <p>这是一个树状的datagrid示例。数据文件位置： <code>/json/datagrid/datagrid-tree.json</code> 。<a href="html/datagrid/datagrid-tree-source.html" data-toggle="dialog" data-options="{id:'dialog-datagrid-source-tree', width:1000, height:600, title:'查看树状Datagrid示例 - 源码'}">点击查看示例源码</a></p>
    </div>
</div>
<div class="bjui-pageContent">
<table id="j_datagrid_tree" data-toggle="datagrid" data-options="{
    width: '100%',
    height: '100%',
    gridTitle: '树状datagrid 示例 ',
    showToolbar: true,
    toolbarItem:'add, cancel, del, save',
    local: 'local',
    editMode:'dialog',
    dataUrl: '${base}/role/resource/root.json',
    inlineEditMult: false,
    editUrl: '${base}/role/resource/edit',
    isTree: 'name',
    addLocation: 'last',
    fieldSortable: false,
    columnMenu: false,
    paging: false,
    treeOptions: {
        expandAll: false,
        add: true,
        simpleData: true,
        keys: {
            parentKey: 'pid'
        }
    },
    dropOptions: {
        drop: true,
        position: 'before',
        dropUrl: '../../json/ajaxDone.json',
        beforeDrag: datagrid_tree_beforeDrag,
        beforeDrop: datagrid_tree_beforeDrop,
        afterDrop: 'array'
    }
}">
    <thead>
    <tr>
        <th data-options="{name:'name', align:'center', width:300, rule:'required'}">资源名称</th>
        <th data-options="{name:'description', align:'center'}">描述</th>
        <th data-options="{name:'url', align:'center'}">链接</th>
        <th data-options="{name:'status'}">状态</th>
        <th data-options="{name:'type'}">类型</th>
        <th data-options="{name:'cTime',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}">创建时间</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    // department
    function datagrid_tree_department() {
        return [{'001':'办公室'},{'002':'财务部'},{'003':'人事部'},{'004':'采购部'},{'005':'市场部'},{'006':'销售部'}]
    }
    // 操作列
    function datagrid_tree_operation() {
        var html = '<button type="button" class="btn-green" data-toggle="edit.datagrid.tr">编辑</button>'
                + '<button type="button" class="btn-red" data-toggle="del.datagrid.tr">删除</button>'

        return html
    }
    //不能拖动一级父节点
    function datagrid_tree_beforeDrag(tr, data) {
        if (data && data.level == 0) {
            return false
        }

        return true
    }
    // 不能将子节点拖为一级父节点
    function datagrid_tree_beforeDrop(data, targetData, position) {
        if (targetData && targetData.level == 0 && position !== 'append') {
            return false
        }

        return true
    }
</script>
</div>